<template>
  <div id="jobList" v-loading="loading">
    <div
      class="pro-list-bd mb30"
      style="cursor: pointer; margin: 20px 0"
      v-for="item in jobListData"
      :key="item.code"
    >
      <div class="df" @click="handleJobdet(item)">
        <span class="pro-list-name" style="margin-right: 20px">{{
          item.name
        }}</span>
        <div class="pro-list-border-right"></div>
        <span class="pro-list-name-span">{{ item.industryName }}</span>
      </div>
      <div class="mt5 mb10">
        <p class="pro-list-summary-p"></p>
      </div>
    </div>

    <div
      v-if="jobListData.length == 0"
      style="text-align: center; margin-top: 20px"
    >
      暂无数据
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const { jobListData } = defineProps({
  jobListData: {
    type: Array,
    default: () => [],
  },
});
const loading = ref(false);
const handleJobdet = (item) => {
  const url =
    '/jorLibrary/jorLibraryDet' +
    '?code=' +
    item.jobCode +
    '&name=' +
    item.jobName;
  window.open(url, '_blank');
};
const handleTableLoading = (isShow) => {
  loading.value = isShow;
};
defineExpose({
  handleTableLoading,
});
</script>

<style lang="scss" scoped>
#jobList {
  .pro-list-bd {
    border-bottom: 1px solid #f2f2f2;
  }
  .pro-list-name {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
  }
  .pro-list-name-span {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    line-height: 20px;
  }
}
</style>
